<script setup lang="ts" name="Screen">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import Top from './components/Top.vue';
import Total from './components/Total.vue';
import Gender from './components/Gender.vue';
import Age from './components/Age.vue';
import Trend from './components/Trend.vue';
import Hot from './components/Hot/index.vue';
import TouristNum from './components/TouristNum.vue';
import Area from './components/Area.vue';
import Map from './components/Map.vue';

// 视口适配函数
const screenX = '1920px';
const screenY = '1080px';
const scale = ref<number>(1);
// 使用scale适配视口
function setScale() {
  const x = parseInt(screenX);
  const y = parseInt(screenY);
  const scaleX = window.innerWidth / x;
  const scaleY = window.innerHeight / y;
  scale.value = Math.min(scaleX, scaleY);
}
onMounted(() => {
  setScale();
  window.addEventListener('resize', setScale);
});
onBeforeUnmount(() => {
  window.removeEventListener('resize', setScale);
});
</script>

<template>
  <div class="container">
    <div class="screen column">
      <div class="top" style="height: 36px">
        <Top />
      </div>
      <div class="content col row justify-evenly q-pb-xl q-pt-md">
        <div class="left column justify-between">
          <div class="lt">
            <Total />
          </div>
          <div class="lc">
            <Gender />
          </div>
          <div class="lb">
            <Age />
          </div>
        </div>
        <div class="center column justify-between q-pt-xl">
          <div class="col q-mt-xl">
            <Map />
          </div>
          <div class="cb q-mt-lg">
            <Trend />
          </div>
        </div>
        <div class="right column justify-between">
          <div class="rt">
            <Hot />
          </div>
          <div class="rc">
            <TouristNum />
          </div>
          <div class="rb">
            <Area />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: url(./images/bg.png) no-repeat;
  background-size: cover;

  .screen {
    position: fixed;
    left: 50%;
    top: 50%;
    width: v-bind(screenX);
    height: v-bind(screenY);
    transform: scale(v-bind(scale)) translate(-50%, -50%);
    transform-origin: left top;

    .content {
      .lt {
        width: 391px;
        height: 321px;
      }
      .lc {
        width: 391px;
        height: 262px;
      }
      .lb {
        width: 391px;
        height: 235px;
      }
      .cb {
        width: 962px;
        height: 216px;
      }
      .rt {
        width: 392px;
        height: 319px;
      }
      .rc {
        width: 392px;
        height: 251px;
      }
      .rb {
        width: 392px;
        height: 246px;
      }
    }
  }
}
</style>
